<template>
    <div class="container">
        <div class="searchMy">
            <el-form :inline="true" size="mini" class="searchMy-form" ref="form" :model="queryObj">
                <el-form-item label="填报期">
                    <el-date-picker v-model="queryObj.date" type="monthrange" 
                    value-format="yyyy-MM" range-separator="至" start-placeholder="开始月份" 
                    end-placeholder="结束月份">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" @click="getTableData()">查询</el-button>
                    <el-button size="mini" @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="tbImg" @click="go('list')">
                <img src="@/assets/images/u3365.png" alt="">
            </div>
        </div>
        <div class="table-list">
            <div style="text-align:right;margin-bottom:10px;">
                <el-button type="danger" size="mini" class="mybtn" @click="delScbgxx()"><i class="el-icon-minus"></i></el-button>
                <el-button type="danger" size="mini" class="mybtn" @click="addScbgxxs()"><i class="el-icon-plus"></i></el-button>
            </div>
            <my-table v-loading="loading" :ifSelect="true" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" :height="$store.state.app.windowHeight - 200" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row @onSelect="onSelectionChange" @onSelectAll="handleselectAll" />

        </div>
    </div>
</template>

<script>

import { queryScbgxx ,addScbgxx, deleteScbgxx} from '@/api/cxtj/fxcx'
export default {
    name: 'qyfpmx',

    data() {
        return {
            loading: false,

            //右侧表格开始
            //右侧表格开始
            tableColumns: [
                {
                    label: '填报年度',
                    prop: 'tbnd',
                    align: 'center',

                },
                {
                    label: '填报月份',
                    prop: 'tbyf',
                    align: 'center',

                },
                {
                    label: '填报时间',
                    prop: 'tbsj',
                    align: 'center',

                },

                {
                    label: '填写人',
                    prop: 'txr',
                    align: 'center',
                },
                {
                    label: '填写人单位',
                    prop: 'txrdw',
                    align: 'center',
                },
                {
                    label: '备注',
                    prop: 'bz',
                    align: 'center',
                },
                {
                    label: '操作',
                    prop: 'caozuo',
                    align: 'center',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.tbsj) {
                            params.row.tbzq = this.queryObj.date[0]+'至'+this.queryObj.date[1]
                            return (
                                <span>
                                    <el-button type="text" onClick={() => this.go('view',params.row)}>查看</el-button>
                                </span>
                            );
                        } else {
                            return (
                                <span>
                                    <el-button type="text" onClick={() => this.go('tbnr',params.row)}>填报</el-button>
                                </span>
                            );
                        }

                    }
                }




            ],
            tableDatas: []
            , queryObj: {
                date: [],
                pageNo: 1,
                pageSize: 20
            },
            selectedRows: [],
            total: 0
        }
    },

    mounted() {
        this.defaultTime()
        this.getTableData()
    },
    methods: {
        defaultTime() {
            //日期范围
            var currentDate = new Date();
            var currentYear = currentDate.getFullYear();
            var currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
            if (currentMonth < 10) {
                currentMonth = '0' + currentMonth
            }
            console.log(currentYear, currentMonth);
            this.queryObj.date = [currentYear + '-01', currentYear + '-' + currentMonth]
        },

        resetForm() {
            this.defaultTime()
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = [];
                }
            }
            this.getTableData();
        },
        getTableData() {
            this.loading = true
            let params = {
                tbqq: this.queryObj.date[0],
                tbqz: this.queryObj.date[1],
                pageSize: this.queryObj.pageSize,
                pageNum: this.queryObj.pageNo
            }
            queryScbgxx(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                } else {
                    this.$message.error(res.message)
                }
                console.log(res)
            })
        },
        addScbgxxs(){
        console.log(1111)
            this.loading = true
            let params = {
                tbqq: this.queryObj.date[0],
                tbqz: this.queryObj.date[1],
                pageSize: this.queryObj.pageSize,
                pageNum: this.queryObj.pageNo
            }
            addScbgxx(params).then(res=>{
                
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        delScbgxx(){
            if (this.selectedRows.length > 0) {
                this.loading = true;
                this.$confirm('该删除后将不可恢复，是否删除？', '友情提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    cancelButtonClass: 'JmconfirmCancelButton',
                    type: 'warning'
                }).then(() => {
                    let ids = []
                    this.selectedRows.forEach(item => {
                        ids.push(item.id)
                    })
                    deleteScbgxx(JSON.stringify({ids:ids})).then(result => {
                        this.loading = false;
                        if (result && result.code == 200) {
                            this.$message.success('删除成功');
                            this.getTableData();
                        } else {
                            this.$message.error('删除数据失败！');
                        }
                    })
                        .catch(error => {
                            this.loading = false;
                        })
                })

            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }
            
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.selectedRows = selectedRows;
        },
        handleselectAll(selectedRows) {
            this.selectedRows = selectedRows;
        },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        go(name, params) {
            this.$emit('changePage', name, params);
        },

    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;

    .searchMy {
        background: #fff;
        padding: 8px;
        position: relative;

        .tbImg {
            width: 28px;
            height: 28px;
            position: absolute;
            top: 7px;
            right: 0;

            img {
                width: 28px;
                height: 28px;
            }
        }

        .searchMy-form {
            height: 28px;
        }
    }

    .mybtn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        padding: 0;
    }

    .btn {
        padding: 8px 8px 8px 0;
    }

    .kplist {
        display: flex;
        justify-content: space-between;

        span {
            font-size: 14px;
            font-weight: normal;
            color: rgba(0, 0, 0, 0.56);
        }
    }

}

.el-pagination {
    text-align: right;
    padding: 8px 16px 8px 0;
    background: #fff;
}
</style>
